iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

Daily UI : 開發者版系列 第 28

Vuetify:Google Contact

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/dybLbVd?editors=1010

Used UI Component ( #3 )

#1 Navigation drawers, #2 List item groups, #3 Selection controls

UI 圖來源見

Discussion

誠如之前所述,像這類的 Groups 元件,重點是關注一堆受控項的選取狀態:點擊漢堡圖標後,你會發現 "預設第一個 list item 保持選取狀態",像這種需求,就要靠 Groups 中的元件幫你快速達成,因為我們只要在 v-list 內添加 <v-list-item-group v-model='selectedListItem'>,幾乎一行搞定!但你若不知道有這種好用元件存在,你可能還是會自幹,那就有點得不償失


上一篇
Vuetify:Google Domain
下一篇
Vuetify:Google YoutubeMusic › Static Layout
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言